<template>
  <el-dialog title="题目预览" :visible.sync="Showdialog" width="50%">
    <div class="container">
      <el-row style="margin-left: -10px; margin-right: -10px">
        <el-col :span="6" style="padding-left: 10px; padding-right: 10px">
          <span>【题型】：{{formData.questionType |Types}}</span>
        </el-col>
        <el-col :span="6" style="padding-left: 10px; padding-right: 10px">
          <span>【编号】：{{formData.id}}</span>
        </el-col>
        <el-col :span="6" style="padding-left: 10px; padding-right: 10px">
          <span>【难度】：{{formData.difficulty}}</span>
        </el-col>
        <el-col :span="6" style="padding-left: 10px; padding-right: 10px">
          <span>【标签】：{{formData.tags}}</span>
        </el-col>
      </el-row>
      <el-row style="margin-left: -10px; margin-right: -10px">
        <el-col :span="6" style="padding-left: 10px; padding-right: 10px">
          <span>【学科】：{{formData.subjectName}}</span>
        </el-col>
        <el-col :span="6" style="padding-left: 10px; padding-right: 10px">
          <span>【目录】：{{formData.directoryName}}</span>
        </el-col>
        <el-col :span="6" style="padding-left: 10px; padding-right: 10px">
          <span>【方向】：外{{formData.direction}}</span>
        </el-col>
      </el-row>
      <hr />
      <div>【题干】</div>
      <div style="color: rgb(64, 158, 255)">
        <p v-html='formData.question'></p>
      </div>
      <div style="margin-bottom: 15px">
        {{formData.questionType |Types}} 选项：（以下选中的选项为正确答案）
      </div>
     
      <el-checkbox-group :value="checkShow" v-if="formData.questionType==='2'">
        <el-row  v-for='item in type' :key='item.id' style='margin: 10px 0px;'>
          <el-checkbox :label="item.isRight" >{{item.title}}</el-checkbox>
        </el-row>
       
       
      </el-checkbox-group>
      <el-radio-group :value="show" v-if="formData.questionType==='1'">
        <el-row v-for='item in type' :key='item.id' style='margin: 10px 0px;' >
          <el-radio :label="item.id"  >{{item.title}}</el-radio> 
        </el-row>
  
   
  </el-radio-group>
      <hr />
      <div>
        【参考答案】：
        <el-button type="danger" @click='videoShow=true'>视频答案预览</el-button>
      </div>
      <div v-if='videoShow'>
        <video :src="formData.videoURL" controls ></video>
      </div>
      <hr />
      <div>
        【答案解析】：
        <p v-html='formData.answer'></p>
      </div>
      <hr />
      <div>
        【题目备注】：
        <p>{{formData.remarks}}</p>
      </div>
      <div style="display: flex; justify-content: end">
        <el-button type="primary" @click="Showdialog = false">关闭</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name:'Problem',
  data() {
    return {
      Showdialog: false,
      videoShow:false,
      type: [],
      formData:{},
      show:'',
      checkShow:[]
     
    };
  },
  filters:{
    Types(val){
 if (val === "1") {
        return "单选题";
      }
      if (val === "2") {
        return "多选题";
      }
      if (val === "3") {
        return "简答题";
      }
    },
     Difficulty(val) {
      if (val === "1") {
        return "简单";
      }
      if (val === "2") {
        return "一般";
      }
      if (val === "3") {
        return "困难";
      }
    },
  }
};
</script>

<style>
.container {
  padding: 10px 10px;
}
.el-row {
  margin-bottom: 30px;
}
::v-deep .el-dialog {
  border-radius: 10px;
}

</style>